<template>
	<div class="order">	
		<p class="title-status" v-if="details.status == 2">状态：待发货</p>
		<p class="title-status" v-if="details.status == 3">状态：已发货</p>
		<div class="order-list">
			<div class="goods">
				<div class="img">
					<img :src="details.img">
				</div>
				<div class="title">
					<p class="tip">{{details.title}}</p>
					<p class="price">¥{{details.price}}</p>
				</div>
				<div class="num">x{{details.buy_num}}</div>
			</div>
			<div class="bottom">
				<p>配送地址 : {{details.consignee}} {{details.mobile}} {{details.provincial_urban_area}} {{details.address}}</p>
			</div>
		</div>
		<div class="details">
			<div class="details-list">
				<span class="title">支付方式</span>
				<span class="con">微信支付</span>
			</div>
			<div class="details-list">
				<span class="title">订单编号</span>
				<span class="con">{{details.out_trade_no}}</span>
			</div>
			<div class="details-list border-none">
				<span class="title">创建时间</span>
				<span class="con">{{details.create_time | formatDate}}</span>
			</div>
		</div>
    <div class="details" v-if="details.status >= 3">
      <div class="details-list">
        <span class="title">物流公司</span>
        <span class="con">{{details.exp_company}}</span>
      </div>
      <div class="details-list border-none">
        <span class="title">物流单号</span>
        <span class="con">{{details.exp_order}}</span>
      </div>
    </div>
		<div class="details">
			<div class="details-list">
				<span class="title">代金券</span>
				<span class="con" v-if="details._coupons">-￥{{details._coupons.money}}</span>
				<span class="con" v-else>无</span>
			</div>
			<div class="details-list border-none">
				<span class="title">价格总计</span>
				<span class="con price" v-if="details._coupons">￥{{details.should_pay}}</span>
			</div>
		</div>
	</div>
</template>

<script>
import { Tab, TabItem  } from 'vux'
import { orserDetail, baseUrl } from '@/api/api'
import { formatDate } from '@/util/date.js'
export default {
	filters:{
    formatDate(time){
      let date = new Date(time*1000);
      return formatDate(date,'yyyy.MM.dd');
      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
    }
	},
  components: {
  	Tab, 
  	TabItem
  },
  data () {
    return {
    	details: {},
    }
  },
  created () {
  	this.order_id = this.$route.query.id
  	this.orderDetails()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    onItemClick (index) {
    	console.log(index)
    },
    orderDetails () {
    	var jsonData = {
    		id: this.order_id
    	}
    	orserDetail(jsonData).then((res) => {
    		this.details = res.data.info
    		console.log(res)
    	}).catch((err) => {
    		console.log(err)
    	})
    }
  }
}
</script>
<style lang="stylus" scoped>
.order
	background-color #f2f2f2
	min-width 100vw
	min-height 100vh
	.title-status
		line-height 5rem
		font-size 1.7rem
		color #333
		font-weight bold
		background-color #fff
		padding-left 1.5rem
		margin-bottom 1rem
	.order-list
		background-color #fff
		margin-bottom 1rem
		.goods
			display flex
			background-color #fff
			margin-bottom 1rem
			padding 2rem 0
			margin 0 1.5rem
			border-bottom 1px solid #e5e5e5
			.img
				width 10rem
				height 7.5rem
				margin-right 1.4rem
				img
					width 100%
					height 100%
					display block
			.title
				position relative
				max-width 17.5rem
				min-width 17.5rem
				.tip
					font-size 1.5rem
					color #333
					font-weight 500
				.price
					color #FF659B
					font-size 1.3rem
					line-height 1.6rem
					position absolute
					bottom 0px
			.num
				flex 1
				text-align right
				line-height 2.1rem
				font-size 1.5rem
				font-weight 500
		.bottom
			color #333
			font-size 1.3rem
			padding 1rem 1.5rem
			line-height 2.5rem
	.details
		background-color #fff
		margin-bottom 1rem
		.details-list
			margin 0 1.5rem
			line-height 5rem
			height 5rem
			border-bottom 1px solid #e5e5e5
			display flex
			.title
				font-size 1.5rem
				color #8D8D99
				flex 1
			.con
				font-size 1.5rem
				color #8D8D99
				flex 1
				text-align right
			.price
				color #FF659B
		.border-none
			border none
</style>